<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>购物车</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
            font-family: Open Sans, Helvetica Neue, Arial, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
        }

        body {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-flex-flow: column;
            flex-flow: column;
            font-family: Open Sans, Helvetica Neue, Arial, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
            background-color: #fff;
        }

        [v-cloak] {
            display: none;
        }

        header {
            width: 100%;
            height: 50px;
            padding-top: 20px;
            background-color: #e3007f;
        }

        header .back {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 80px;
            height: 50px;
            background: url(../images/system_image/back.png);
            background-position: 12px 16px;
            background-size: 11px 18px;
            background-repeat: no-repeat;
        }

        header h1 {
            width: 100%;
            height: 50px;
            text-align: center;
            color: #fff;
            font-size: 20px;
            line-height: 50px;
        }

        section {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            overflow: auto;
        }

        body footer {
            position: fixed;
            width: 100%;
            height: 50px;
            display: flex;
            background-color: #fff;
            border-top: 1px solid #d1d1d1;
            bottom: 0;
            left: 0;
            z-index: 999;

        }


        .control {
            position: relative;
            width: 150px;
            height: 50px;
            float: left;
        }

        .control .select {
            position: absolute;
            top: 17px;
            left: 8px;
            width: 16px;
            height: 16px;
            background-repeat: no-repeat;
            background-image: url(../images/system_image/select_on.png);
            background-size: 100% 100%;
            background-position: center center;
        }

        .control .select-off {
            background-image: url(../images/system_image/select_off.png);
        }

        .control .info {
            box-sizing: border-box;
            width: 100%;
            height: 50px;
            padding-left: 32px;
            padding-top: 8px;
            padding-bottom: 8px;
        }

        .control .info .top {
            height: 20px;
            font-size: 12px;
            color: #444;
            text-align: left;
            line-height: 20px;
        }

        .control .info .bottom {
            height: 14px;
            font-size: 10px;
            color: #888;
            text-align: left;
            line-height: 14px;
        }

        .panel {

            display: block;
            height: 50px;
            float: left;
        }

        .panel .info {
            box-sizing: border-box;
            width: 150px;
            height: 50px;
            padding-top: 8px;
            padding-right: 8px;
        }

        .panel .info .top {
            position: relative;
            width: 100%;
            height: 20px;
            text-align: right;
            font-size: 16px;
            color: #444;
            line-height: 20px;
            float: left;
        }

        .panel .info .top .amount {
            font-weight: bold;
            color: #e3007f;
        }

        .panel .info .bottom {
            position: relative;
            height: 14px;
            font-size: 10px;
            color: #888;
            text-align: right;
            line-height: 14px;
        }

        .buy {
            display: block;
            width: 112px;
            height: 50px;
            float: left;
        }

        .buy .buy-button {
            width: 112px;
            height: 40px;
            margin-top: 5px;
        }

        .highlight {
            opacity: 0.7;
        }

        .list {
            display: block;
            position: relative;
            box-sizing: border-box;
            width: 100%;
            height: auto;
        }

        .ware {
            position: relative;
            width: 100%;
            height: 128px;
            margin-bottom: 8px;
            background-color: #fff;
        }

        .ware .content {
            position: relative;
            box-sizing: border-box;
            width: 100%;
            height: 100%px;
            padding-top: 8px;
            padding-bottom: 8px;
        }

        .ware .select {
            position: absolute;
            width: 16px;
            height: 16px;
            top: 56px;
            left: 8px;
            background-repeat: no-repeat;
            background-image: url(../images/system_image/select_on.png);
            background-size: 100% 100%;
            background-position: center center;
            z-index: 2;
        }

        .ware .select-off {
            background-image: url(../images/system_image/select_off.png);
        }

        .ware .thumbnail {
            position: absolute;
            top: 14px;
            left: 32px;
            height: 100px;
            width: 100px;
        }

        .ware .info {
            position: relative;
            box-sizing: border-box;
            padding-left: 144px;
            width: 100%;
            height: 114px;
            padding-right: 28px;
        }

        .ware .info .name {
            width: 100%;
            height: 15px;
            color: #555555;
            margin-top: 14px;
            font-size: 15px;
        }

        .ware .info .price-tag {
            margin-top: 10px;
            width: 100%;
            height: 12px;
            font-size: 12px;
            vertical-align: top;
        }

        .ware .info .price-tag .price {
            color: #e3007f;
        }

        .ware .info .price-tag .unit {
            font-size: 8px;
            color: #cbcbcb;
        }

        .ware .control {
            position: absolute;
            width: 110px;
            height: 23px;
            top: 53px;
            right: 8px;
        }

        .ware .control .minus {
            position: absolute;
            top: 0;
            left: 0;
            width: 23px;
            height: 23px;
            z-index: 2;
        }

        .ware .control .count {
            position: relative;
            top: 0;
            margin-left: 31px;
            margin-right: 31px;
            width: auto;
            height: 23px;
            text-align: center;
            line-height: 23px;
            color: #444;
            font-size: 12px;
            background-image: url(../images/system_image/count.png);
            background-repeat: no-repeat;
            background-size: 48px 23px;
        }

        .ware .control .add {
            position: absolute;
            top: 0;
            right: 0;
            width: 23px;
            height: 23px;
            z-index: 2;
        }

        /* 添加商品 */
        .addGood {
            width: 100%;
            height: 200px;
            background-size: 80% 200px;
            background-position: center;

            border: 1px solid rgb(250,250,250);
            background-image: url(../images/system_image/buybuybuy.jpeg);
        }

        /*当购物车里面没有数据时，空空如也*/
        .empty {
            display: none;

            width: 100%;
            height: 100%;
            background-color: #fff;
            background-image: url(../images/system_image/empty.png);
            background-repeat: no-repeat;
            background-size: 100% 70%;
            background-position: center 50px;
        }

        .active {
            opacity: 0.7;
        }
    </style>
</head>

<body onload="loading();">
    <header id="header">
        <div class="back" tapmode="highlight" onclick="api.closeWin();"></div>
        <h1>购物车</h1>
    </header>
    <!-- 这是购物车商品列表的开始 -->
    <section class="GoodsList" id="GoodsList" v-cloak>
        <div class="ware" v-for="(ware,index) in wares">
            <div class="content" tapmode v-on:click.stop="fnOpenWareWin(id[index]);">
                <div :id="'select_'+id[index]" class="select" v-on:click.stop="fnSetSelect(id[index]);"></div>
                <img class="thumbnail" :src="ware.url">
                <div class="info">
                    <div class="name">{{ware.title}}</div>
                    <div class="price-tag">
                        ￥<span class="price" :id="'price_'+id[index]">{{ware.price}}</span>
                        <span class="unit">/{{ware.oriPrice}}</span>
                    </div>
                </div>
            </div>
            <div class="control">
                <img class="minus" src="../images/system_image/minus.png" tapmode v-on:click.stop="fnMinus(id[index]);">
                <div class="count" :id="'countNum_'+id[index]">{{nums[index]}}</div>
                <img class="add" src="../images/system_image/add.png" tapmode v-on:click.stop="fnAdd(id[index]);">
            </div>
        </div>
        <div class="addGood" onclick="openHome();">

        </div>
    </section>
<!-- 这是购物车商品列表的结束 -->
<!-- 如果购物车里面没有商品，empty模块出现 -->
    <div class="empty" id="empty" onclick="openHome();">

    </div>

    <footer id="footer">
        <div class="control">
            <div id="selectAll" class="select" name="is" onclick="selAll();"></div>
            <div class="info">
                <div class="top">全选</div>
                <div class="bottom">已选<span id="countAll" class="count">0</span>件</div>
            </div>
        </div>
        <div class="panel">
            <div class="info">
                <div class="top">总金额:￥<span id="amount" class="amount">0</span></div>
                <div class="bottom">不含运费</div>
            </div>
        </div>
        <div class="buy">
            <img class="buy-button" src="../images/system_image/buy.png" onclick="alert('订单还未生成');">
        </div>
    </footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script src="../script/vue.js"></script>
<script type="text/javascript" src="../script/local_db.js"></script>
<script type="text/javascript">


    var vm = new Vue({
        el: '#GoodsList',
        data: {
            wares: [],
            nums: [],
            selecton: 'url("../images/system_image/select_on.png")',
            selectoff: 'url("../images/system_image/select_off.png")',
            id: []
        },
        methods: {
            // 商品数量减方法
            fnMinus: function (id) {
                var num = document.getElementById('countNum_' + id).innerHTML;
                var countnum = num - 1;
                var sele = document.getElementById('select_' + id);
                if (sele.style.backgroundImage == this.selecton) {
                    var totalnum = document.getElementById('amount').innerHTML;
                    var price = document.getElementById('price_' + id).innerHTML;
                    if (countnum > -1)
                        totalnum = parseFloat(totalnum) - parseFloat(price);
                    if (countnum < 0) countnum = 0;
                    document.getElementById('countNum_' + id).innerHTML = countnum;
                    if (totalnum < 0) totalnum = 0;
                    document.getElementById('amount').innerHTML = totalnum;
                }
                CountAll();
                upDateNum(id);
            },
            // 商品数量加方法
            fnAdd: function (id) {
                var num = document.getElementById('countNum_' + id).innerHTML;
                var countnum = parseInt(num) + 1;
                document.getElementById('countNum_' + id).innerHTML = countnum;
                var sele = document.getElementById('select_' + id);
                if (sele.style.backgroundImage == this.selecton) {
                    var totalnum = document.getElementById('amount').innerHTML;
                    var price = document.getElementById('price_' + id).innerHTML;
                    var num = document.getElementById('countNum_' + id).innerHTML;
                    totalnum = parseFloat(totalnum) + parseFloat(price);
                    if (totalnum < 0) totalnum = 0;
                    document.getElementById('amount').innerHTML = totalnum;
                    // alert(1);
                }
                CountAll();
                upDateNum(id);
            },
            // 商品选中处理方法
            fnSetSelect: function (id) {
                var sele = document.getElementById('select_' + id);
                if (sele.style.backgroundImage == this.selecton) {
                    sele.style.backgroundImage = "url(../images/system_image/select_off.png)";
                    var totalnum = document.getElementById('amount').innerHTML;
                    var price = document.getElementById('price_' + id).innerHTML;
                    var num = document.getElementById('countNum_' + id).innerHTML;
                    totalnum = parseFloat(totalnum) - parseFloat(price) * parseInt(num);
                    if (totalnum < 0) totalnum = 0;
                    document.getElementById('amount').innerHTML = totalnum;
                }
                else {
                    sele.style.backgroundImage = "url(../images/system_image/select_on.png)";
                    var totalnum = document.getElementById('amount').innerHTML;
                    var price = document.getElementById('price_' + id).innerHTML;
                    var num = document.getElementById('countNum_' + id).innerHTML;
                    totalnum = parseFloat(totalnum) + parseFloat(price) * parseInt(num);
                    if (totalnum < 0) totalnum = 0;
                    document.getElementById('amount').innerHTML = totalnum;
                }
                CountAll();
                
            },
            // 在购物车界面打开商品详情界面
            fnOpenWareWin: function (ware_id) {
                var num = document.getElementById('countNum_' + ware_id).innerHTML;
                for (index in vm.id) {
                    if (ware_id == vm.id[index]) {
                        sessionStorage.setItem('wareInfo_id', JSON.stringify(vm.wares[index]));
                        sessionStorage.setItem('goodsNum_' + ware_id, num);
                        sessionStorage.setItem('Id', ware_id);
                        window.location.href='wareInfo.html';
                    }
                }
                // sessionStorage.setItem('')
            }

        }
    });


    // 商品id数组
    var goodsListid = [1, 2, 3, 4, '11', '12', '13', '14', '21', '22', '23', '24', '31', '32', '33', '34'];
    for (index in goodsListid) {
        var session = sessionStorage.getItem('goods_' + goodsListid[index]);
        var sessionNum = sessionStorage.getItem('goodsNum_' + goodsListid[index]);
        if (session != null & sessionNum != null) {
            //alert(session);
            vm.wares.push(JSON.parse(session));
            vm.nums.push(JSON.parse(sessionNum));
            vm.id.push(goodsListid[index]);
            // alert(vm.wares);
        }
    }

    //页面加载自动加载函数判断有无数据
    function loading() {
        var list = document.getElementById('GoodsList');
        var empty = document.getElementById('empty');
        //alert("sss");
        if (vm.wares == '') {
            list.style.display = "none";
            empty.style.display = 'block';
        }
        else {
            list.style.display = "block";
            empty.style.display = 'none';
            // 商品选中及相关处理
            var sel = document.getElementById('selectAll');
            var totalnum = document.getElementById('amount').innerHTML;
            sel.style.backgroundImage = "url(../images/system_image/select_on.png)";
            for (index in vm.id) {
                var sele = document.getElementById('select_' + vm.id[index]);
                sele.style.backgroundImage = "url(../images/system_image/select_on.png)";
                var price = document.getElementById('price_' + vm.id[index]).innerHTML;
                var num = document.getElementById('countNum_' + vm.id[index]).innerHTML;
                totalnum = parseFloat(totalnum) + parseFloat(price) * parseInt(num);
            }
            if (totalnum < 0) totalnum = 0;
            document.getElementById('amount').innerHTML = totalnum;

            CountAll();
           

        }
    }

    //点击图片进入首页
    function openHome() {
        window.location.href = "./Shoppingindex.html";
    }
    var selCount = 0;

    //全选 全不选
    function selAll() {

        var sel = document.getElementById('selectAll');
        if (sel.style.backgroundImage == vm.selecton) {
            sel.style.backgroundImage = "url(../images/system_image/select_off.png)";
            for (index in vm.id) {
                var sele = document.getElementById('select_' + vm.id[index]);
                sele.style.backgroundImage = "url(../images/system_image/select_off.png)";

            }
            document.getElementById('amount').innerHTML = 0;

        }
        else {
            var totalnum = document.getElementById('amount').innerHTML;
            sel.style.backgroundImage = "url(../images/system_image/select_on.png)";
            for (index in vm.id) {
                var sele = document.getElementById('select_' + vm.id[index]);
                sele.style.backgroundImage = "url(../images/system_image/select_on.png)";
                var price = document.getElementById('price_' + vm.id[index]).innerHTML;
                var num = document.getElementById('countNum_' + vm.id[index]).innerHTML;
                totalnum = parseFloat(totalnum) + parseFloat(price) * parseInt(num);
            }
            if (totalnum < 0) totalnum = 0;
            document.getElementById('amount').innerHTML = totalnum;

        }
         CountAll();
    }
// 统计已选中商品的所有购买数量
    function CountAll() {
        var countNum = 0;
        for (index in vm.id) {
            var sel = document.getElementById('select_' + vm.id[index]);
            if (sel.style.backgroundImage == vm.selecton) {
                var count = document.getElementById('countNum_' + vm.id[index]).innerHTML;
                countNum = parseInt(countNum) + parseInt(count);
            }
        }
        document.getElementById('countAll').innerHTML = countNum;
    }

    function upDateNum(id){
        for (index in vm.id) {
            if(id==vm.id[index]){
                var count = document.getElementById('countNum_' + id).innerHTML;
                sessionStorage.setItem("goodsNum_"+id,parseInt(count)); 
                
            }
            
        }
    }
</script>

</html>
